<template>
    <div class="container">
        <!-- 搜索部分 -->
        <div class="search">
            <div class="loge">

                <img class="loge-img"
                     src="../../assets/images/header-loge.png"
                     alt="logeicon"
                     @click="Topage()">

            </div>
            <div class="search-all">
                <el-input class="search-input"
                          placeholder="请输入内容"
                          v-model="searchinput"
                          clearable
                          @keyup.enter.native="searchText(searchinput)">
                    <el-button class="search-button"
                               type="primary"
                               slot="append"
                               icon="el-icon-search"
                               @click="searchText(searchinput)">搜索</el-button>

                </el-input>

                <!-- <el-input class="search-input"
                          placeholder="请输入内容"
                          v-model="searchinput"
                          clearable
                          @keyup.enter.native="searchText(searchinput)"> </el-input> -->

            </div>
            <div class="search-banner">

                <el-carousel height="80px"
                             direction="vertical"
                             :autoplay="true">

                    <el-carousel-item v-for="(item, index) in bannerlist"
                                      :key="index">
                        <a :href="item.link"
                           target="_blank">
                            <img class="loge-img"
                                 :src="item.imgsrc"
                                 alt="bannericon" />
                        </a>

                    </el-carousel-item>
                </el-carousel>

            </div>

        </div>
        <!-- 中间链接 -->
        <div class="middle-net">
            <div class="middle-list">
                <div class="middle-link"
                     v-for="(item, index) in middlelist"
                     :key="index">
                    <el-link :href="item.link"
                             target="_blank"
                             :class="[item.id>10 ? 'addhiden':'']">{{ item.name }}</el-link>
                </div>
            </div>
        </div>
        <!-- 中间精推推荐栏 -->
        <div class="hot-topic">
            <transition name="hot">
                <div class="move-table"
                     v-show="showhot"
                     ref="mySlick"
                     v-if="hotlist.length>0">

                    <slick ref="slickthree"
                           :options="MidslickOptions">
                        <div class="nuit-table"
                             v-for="(item,index) in hotlist"
                             :key="index"
                             v-show="addmiddlediv"
                             @click="ToMessageDetails(item.id,item.cate_id)">
                            <div class="img-table">
                                <img class="hot-img"
                                     :src="item.imgsrc"
                                     alt="热点精选">
                            </div>
                            <div class="text-table">
                                <p class="table-p textOut">{{item.text}}</p>
                            </div>
                        </div>
                    </slick>

                </div>
                <div class="move-table"
                     v-else>

                    <div class="add_nodiv"
                         v-show="!addmiddlediv">

                        <div class="img-table">
                            <img class="hot-img"
                                 src="../../assets/images/no_text.jpg"
                                 alt="热点精选">
                        </div>
                        <div class="text-table">
                            <p class="table-p textOut">暂无数据！</p>
                        </div>

                    </div>
                </div>
            </transition>
            <div class="close-hot">

                <div class="add-hotdiv"
                     @click="showhotHide()">
                    <p>{{closetext}} <i class="el-icon-arrow-right"
                           :class="[showhot==true ? 'addrotateX':'addrotateX2']"></i> </p>
                </div>
            </div>
        </div>
        <!-- 热门导航 -->
        <div class="site-all">
            <div class="site-map">
                <div class="site-list">
                    <div class="site-link"
                         v-for="(item, index) in sitelist"
                         :key="index"
                         :class="[item.id==0? 'addsite':'']">
                        <el-link :href="item.link"
                                 target="_blank"
                                 :underline="false"
                                 :class="[index>11 ? 'addhiden':'']">{{ item.name }}</el-link>
                    </div>
                </div>

            </div>
            <div class="site-classify">
                <div class="site-top">
                    <div class="top-list"
                         v-for="(item,index) in siteclassify"
                         :key="index">
                        <el-link :href="item.link"
                                 :underline="false"
                                 target="_blank">{{ item.name }}</el-link>
                    </div>
                </div>

                <div class="site-detail">
                    <div class="classify-table"
                         v-for="(items,index) in siteclassify"
                         :key="index">
                        <div class="every-table"
                             v-for="(item,indexone) in items.everyclassify"
                             :key="indexone">

                            <el-link :href="item.link"
                                     target="_blank"
                                     :underline="false"
                                     :class="[indexone>10 ? 'addhiden':'']">{{ item.name }}</el-link>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--热点精推 -->
        <div class="new-push">
            <div class="hot-spot">
                <div class="spot-title">
                    <div class="spot-table"
                         v-for="(item,index) in spotlist"
                         :key="index"
                         :class="item.cate_id == leftcolorCode ? 'add_color':'' "
                         @click="searchClass(item.cate_id,item.name)">
                        <p class="linkclass"
                           :value="item.cate_id">{{ item.name }}</p>
                    </div>
                    <div class="spot-table  addpadding"
                         @click="ToMessageList(1,leftcolorCode)">
                        <el-button class="addbutton"
                                   plain
                                   size="small">更多<i class="el-icon-d-arrow-right"></i></el-button>
                    </div>
                </div>

                <div class="spot-content"
                     v-if="leftlist.length>0">
                    <slick ref="slicktwo"
                           :options="LeftslickOptions">
                        <div class="spot-hotlist"
                             v-for="(item,index) in leftlist"
                             :key="index"
                             @click="ToMessageDetails(item.id,item.cate_id)">
                            <div class="hotlist-table">
                                <div class="hotlist-conimg">
                                    <el-image class="hotlist-img"
                                              :src="item.imgsrc"
                                              fit="cover"></el-image>
                                </div>
                                <div class="new-title ">
                                    <p class="textOut">{{item.title}}</p>
                                </div>

                            </div>
                        </div>
                    </slick>

                </div>

                <div class="add_spot_div"
                     v-else>
                    <div class="hotlist-table">
                        <div class="hotlist-conimg">
                            <el-image class="hotlist-img"
                                      :src="spot_img"
                                      fit="cover"></el-image>
                        </div>
                        <div class="new-title ">
                            <p class="textOut">暂无数据！</p>
                        </div>
                        <div class="new-text textOut"></div>
                    </div>
                </div>
            </div>
            <!-- 精推 -->
            <div class="pure-push">
                <div class="pure-title">
                    <div class="pure-icon"
                         @click="backtoggle(movestauts)">
                        <i class="el-icon-arrow-left"></i>
                    </div>
                    <div class="pure-middletitle">
                        <div id="addmove"
                             class="pure-content">
                            <div class="pure-table"
                                 v-for="(item,index) in purelist"
                                 :key="index"
                                 :class="item.cate_id == rightcolorCode ? 'add_color':'' "
                                 @click="searchpureClass(item.cate_id,item.name)">
                                <p class="linkclass"
                                   :value="item.cate_id">{{ item.name }} </p>
                            </div>
                        </div>
                    </div>
                    <div class="pure-icon"
                         @click="toggle(movestauts)">
                        <i class="el-icon-arrow-right"></i>
                    </div>
                    <div class="addpadding"
                         @click="ToMessageList(2,rightcolorCode)">

                        <el-button class="addbutton"
                                   plain
                                   size="small">更多<i class="el-icon-d-arrow-right"></i></el-button>
                    </div>

                </div>

                <div class="pure-list"
                     v-if="rightlist.length >0">

                    <slick ref="slickone"
                           :options="slickOptions">
                        <div class="pure-hotlist"
                             v-for="(item,index) in rightlist"
                             :key="index"
                             @click="ToMessageDetails(item.id,item.cate_id)">
                            <div class="purelist-table">
                                <div class="purelist-img">
                                    <el-image class="purelist-img"
                                              :src="item.imgsrc"
                                              fit="cover"></el-image>
                                </div>
                            </div>
                            <div class="purelist-details">
                                <div class="purelist-title textOut">
                                    <p class="textOut">{{item.title}}</p>
                                </div>
                                <div class="purelist-text textOut">{{item.text }}</div>
                                <div class="purelist-name textOut">{{item.name}} {{item.date}}</div>
                            </div>
                        </div>
                    </slick>
                </div>
                <div class="add_pure-list"
                     v-else>
                    <div class="pure-hotlist">
                        <div class="purelist-table">
                            <div class="purelist-img">
                                <el-image class="purelist-img"
                                          :src="spot_img"
                                          fit="cover"></el-image>
                            </div>
                        </div>
                        <div class="purelist-details">
                            <div class="purelist-title textOut">
                                <p class="textOut">暂无数据！</p>
                            </div>
                            <div> </div>

                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</template>
<script>
//import "../../ElementUI/tqw_widget_float.js";
import { throttle } from "../../ElementUI/public.js";
import Slick from 'vue-slick';
export default {
    components: {
        'slick': Slick,
    },
    data() {
        return {
            searchinput: "",
            bannerlist: [
            ],
            middlelist: [
            ],
            showhot: true,
            hotlist: [
            ],
            closetext: "点击收起",
            sitelist: [
            ],
            siteclassify: [
            ],
            spotlist: [
            ],
            purelist: [
            ],
            leftlist: [
            ],
            rightlist: [
            ],
            movestauts: 0,
            leftcolorCode: 3,
            rightcolorCode: 12,
            hotname: "热点",
            goodname: "精推",
            addmiddlediv: true,
            add_no_spot: true,
            spot_img: require("../../assets/images/no_text.jpg"),
            //轮播图参数
            slickOptions: {
                slidesToShow: 6,//显示个数
                slidesToScroll: 1,//一次轮播个数
                autoplay: true,//自动播放
                autoplaySpeed: 3000,//播放间隔
                vertical: true,//垂直播放
                arrows: false,//箭头
                //infinite:true,//循环播放
                //prevArrow: "<button type='button' class=' slick-prevArrow slick-next slick-arrow'>上一篇</button>",
                //nextArrow: "<button type='button' class=' slick-prevArrow slick-next slick-arrow'>下一篇</button>",
            },
            LeftslickOptions: {
                slidesToShow: 4,//显示个数
                slidesToScroll: 1,//一次轮播个数
                autoplay: true,//自动播放
                autoplaySpeed: 3000,//播放间隔
                vertical: true,//垂直播放
                arrows: false,//箭头
                infinite: true,//循环播放
                lazyLoad: 'ondemand',
                //prevArrow: "<button type='button' class=' slick-prevArrow-2 slick-next slick-arrow'>上一篇</button>",
                //nextArrow: "<button type='button' class=' slick-prevArrow-2 slick-next slick-arrow'>下一篇</button>",
            },

            MidslickOptions: {
                slidesToShow: 10,//显示个数
                slidesToScroll: 1,//一次轮播个数
                autoplay: true,//自动播放
                autoplaySpeed: 3000,//播放间隔
                arrows: false,//箭头
            },
        };
    },
    created() {
        //搜索广告链接
        this.getserchLinks();
        //中间链接
        this.getMiddleLink();
        //热门导航接口
        this.getTopnavigation();
        //热点精推接口
        this.getSpotlist();
        //精推
        this.getPurelist();
        //热点文章接口
        this.getSpottext(3);
        //精推文章接口
        this.getPuretext(12, 12);
    },
    mounted() {
        document.querySelector('body').setAttribute('style', 'background-color:#f6f6f6');
    },
    methods: {
        //控制中间列表状态
        //点击展开收起
        showhotHide() {
            let _this = this;
            _this.showhot = !_this.showhot
            if (_this.showhot == true) {
                _this.closetext = "点击收起";
            }
            else {
                _this.closetext = "点击展开";
            }
        },
        //精推信息左边滚动
        toggle(num) {
            let _this = this;
            let len = _this.purelist.length;
            if (len - num > 11) {
                _this.movestauts = num + 1;
                let addmove = document.getElementById("addmove");
                addmove.style.position = "absolute";
                addmove.style.left = num * -55 + "px";
            }

        },
        //精推信息右边滚动
        backtoggle(num) {
            let _this = this;
            if (num > 0) {
                _this.movestauts = num - 1;
                let addmove = document.getElementById("addmove");
                addmove.style.position = "absolute";
                addmove.style.left = (num - 1) * -55 + "px";

            }
        },
        //搜索广告链接
        getserchLinks() {
            let _this = this;
            _this.bannerlist = [];
            let Url = "/adv"
            let Params = {};
            this.$https.fetchGet(Url, Params).then(res => {

                let resdata = res.data;
                switch (resdata.code) {
                    case 1000:
                        let adddata = resdata.data
                        for (let i = 0; i < 4; i++) {
                            if (adddata[i].pos == 2) {
                                _this.bannerlist.push(
                                    {
                                        id: adddata[i].id,
                                        imgsrc: adddata[i].pic,
                                        link: adddata[i].link
                                    }
                                )
                            }
                        }

                        break;
                    case 1002:

                        break
                }
            });
        },
        //获取中间链接接口
        getMiddleLink() {
            let _this = this;
            _this.middlelist = [];
            let Url = "/link?type=2&page=1&limit=10"
            let Params = {};
            this.$https.fetchGet(Url, Params).then(res => {
                let resdata = res.data;
                switch (resdata.code) {
                    case 1000:
                        let adddata = resdata.data
                        switch (adddata.current_page) {
                            case 1:
                                let middledata = adddata.data;
                                for (var i = 0; i < middledata.length; i++) {
                                    _this.middlelist.push({
                                        id: middledata[i].orderby - 1,
                                        name: middledata[i].name,
                                        link: middledata[i].link,
                                    });
                                }
                                break;
                        }
                        break;
                    case 1002:

                        break

                }
            });
        },
        //热门导航接口
        getTopnavigation() {
            let _this = this;
            _this.sitelist = [];
            _this.siteclassify = [];

            let Url = "/website"
            let Params = {};
            this.$https.fetchGet(Url, Params).then(res => {
                let resdata = res.data;
                switch (resdata.code) {
                    case 1000:
                        let adddata = resdata.data
                        for (var i = 0; i < adddata.length; i++) {
                            if (adddata[i].orderby == 1) {
                                _this.sitelist.push({
                                    id: 0,
                                    name: adddata[i].name,
                                    link: adddata[i].link
                                })
                                for (var j = 0; j < adddata[i].tcate.length; j++) {
                                    _this.sitelist.push({
                                        id: adddata[i].tcate[j].orderby,
                                        name: adddata[i].tcate[j].name,
                                        link: adddata[i].tcate[j].link
                                    })
                                }
                            }
                            else {
                                let userclass = [];
                                for (var j = 0; j < adddata[i].tcate.length; j++) {
                                    userclass.push({
                                        id: adddata[i].tcate[j].orderby,
                                        name: adddata[i].tcate[j].name,
                                        parentlevel: adddata[i].tcate[j].pid,
                                        link: adddata[i].tcate[j].link
                                    })
                                }
                                this.siteclassify.push({
                                    id: adddata[i].orderby - 1,
                                    name: adddata[i].name,
                                    link: adddata[i].link,
                                    everyclassify: userclass
                                });
                            }
                        }
                        break;
                    case 1002:

                        break;
                }

            });
        },
        //热点列表接口
        getSpotlist() {
            let _this = this;
            this.spotlist = [];
            let Url = "/darticlecate?fcate=1&page=1&limit=5"
            let Params = {};
            this.$https.fetchGet(Url, Params).then(res => {
                let resdata = res.data;
                switch (resdata.code) {
                    case 1000:

                        let adddata = resdata.data
                        switch (adddata.current_page) {
                            case 1:

                                let spotdata = adddata.data;

                                for (var i = 0; i < spotdata.length; i++) {

                                    this.spotlist.push({
                                        id: spotdata[i].orderby,
                                        name: spotdata[i].cate_name,
                                        link: spotdata[i].link,
                                        cate_id: spotdata[i].id,
                                    });
                                }

                                break;
                        }
                        break;
                    case 1002:
                        console.log(resdata.msg)
                        break
                }

            });
        },
        //精推列表接口
        getPurelist() {
            let _this = this;
            _this.purelist = [];
            let Url = "/darticlecate?fcate=2&page=1&limit=100"
            let Params = {};
            this.$https.fetchGet(Url, Params).then(res => {
                let resdata = res.data;
                switch (resdata.code) {
                    case 1000:
                        let adddata = resdata.data
                        switch (adddata.current_page) {
                            case 1:

                                let puredata = adddata.data;

                                for (var i = 0; i < puredata.length; i++) {
                                    _this.purelist.push({
                                        id: puredata[i].orderby,
                                        name: puredata[i].cate_name,
                                        link: puredata[i].link,
                                        cate_id: puredata[i].id,
                                    });
                                }
                                _this.purelist.push({
                                    id: "",
                                    name: "",
                                    link: "",
                                    cate_id: "",
                                });

                                break;
                        }
                        break;
                    case 1002:
                        console.log(resdata.msg)
                        break;
                }

            });
        },
        //热点文章接口
        getSpottext(cate_id) {
            let _this = this;
            _this.leftlist = [];
            let Url = "/articlelist?cate_id=" + cate_id + "&page=1&limit=100"
            let Params = {};
            this.$https.fetchGet(Url, Params).then(res => {
                let resdata = res.data;
                switch (resdata.code) {
                    case 1000:

                        let adddata = resdata.data
                        switch (adddata.current_page) {
                            case 1:
                                let leftdata = adddata.data;
                                for (var i = 0; i < leftdata.length; i++) {
                                    if (leftdata[i].pos == 1) {
                                        _this.leftlist.push({
                                            id: leftdata[i].a_id,
                                            cate_id: leftdata[i].cate_id,
                                            title: leftdata[i].title,
                                            text: leftdata[i].seo_keywords,
                                            imgsrc: leftdata[i].thumb,
                                        });
                                    }

                                }
                                if (_this.leftlist.length == 0) {
                                    _this.add_no_spot = false
                                }
                                else if (_this.leftlist.length > 4) {

                                    for (var j = 0; j < 50; j++) {
                                        for (var i = 0; i < leftdata.length; i++) {
                                            if (leftdata[i].pos == 1) {
                                                _this.leftlist.push({
                                                    id: leftdata[i].a_id,
                                                    cate_id: leftdata[i].cate_id,
                                                    title: leftdata[i].title,
                                                    text: leftdata[i].seo_keywords,
                                                    imgsrc: leftdata[i].thumb,
                                                });
                                            }
                                        }

                                    }

                                }
                                // console.log(_this.leftlist.length)
                                break;
                        }
                        break;
                    case 1002:
                        console.log(resdata.msg)
                        break
                }

            });
        },
        //精推文章接口
        getPuretext(cate_id, num) {
            if (num == 12) {
                let _this = this;
                _this.rightlist = [];
                _this.hotlist = [];

                let Url = "/articlelist?cate_id=" + cate_id + "&page=1&limit=100"
                let Params = {};
                this.$https.fetchGet(Url, Params).then(res => {
                    let resdata = res.data;
                    switch (resdata.code) {
                        case 1000:

                            let adddata = resdata.data
                            switch (adddata.current_page) {
                                case 1:
                                    let rightdata = adddata.data;

                                    for (var i = 0; i < rightdata.length; i++) {
                                        if (rightdata[i].pos == 1) {
                                            _this.rightlist.push({
                                                id: rightdata[i].a_id,
                                                cate_id: rightdata[i].cate_id,
                                                title: rightdata[i].title,
                                                text: rightdata[i].seo_keywords,
                                                imgsrc: rightdata[i].thumb,
                                                name: rightdata[i].name,
                                                date: rightdata[i].created_at
                                            });

                                        }
                                        else {
                                            _this.hotlist.push({
                                                id: rightdata[i].a_id,
                                                cate_id: rightdata[i].cate_id,
                                                title: rightdata[i].title,
                                                text: rightdata[i].title,
                                                imgsrc: rightdata[i].thumb,
                                                name: rightdata[i].name,
                                                date: rightdata[i].created_at
                                            });
                                        }


                                    }

                                    if (_this.hotlist.length == 0) {

                                        _this.addmiddlediv = false
                                    }


                                    if (_this.rightlist.length > 6) {

                                        for (var j = 0; j < 50; j++) {
                                            for (var i = 0; i < rightdata.length; i++) {
                                                if (rightdata[i].pos == 1) {
                                                    _this.rightlist.push({
                                                        id: rightdata[i].a_id,
                                                        cate_id: rightdata[i].cate_id,
                                                        title: rightdata[i].title,
                                                        text: rightdata[i].seo_keywords,
                                                        imgsrc: rightdata[i].thumb,
                                                        name: rightdata[i].name,
                                                        date: rightdata[i].created_at
                                                    });

                                                }
                                                // else {
                                                //     _this.hotlist.push({
                                                //         id: rightdata[i].a_id,
                                                //         cate_id: rightdata[i].cate_id,
                                                //         title: rightdata[i].title,
                                                //         text: rightdata[i].title,
                                                //         imgsrc: rightdata[i].thumb,
                                                //         name: rightdata[i].name,
                                                //         date: rightdata[i].created_at
                                                //     });
                                                // }


                                            }
                                        }

                                    }

                                    break;
                            }
                            break;
                        case 1002:
                            console.log(resdata.msg)
                            break

                    }

                }).then(() => {
                    this.init()

                }).catch((err) => {

                })
            }
            else {
                let _this = this;
                _this.rightlist = [];
                //_this.hotlist = [];
                let Url = "/articlelist?cate_id=" + cate_id + "&page=1&limit=100"
                let Params = {};
                this.$https.fetchGet(Url, Params).then(res => {
                    let resdata = res.data;
                    switch (resdata.code) {
                        case 1000:
                            let adddata = resdata.data
                            switch (adddata.current_page) {
                                case 1:
                                    let rightdata = adddata.data;
                                    for (var i = 0; i < rightdata.length; i++) {
                                        if (rightdata[i].pos == 1) {
                                            _this.rightlist.push({
                                                id: rightdata[i].a_id,
                                                cate_id: rightdata[i].cate_id,
                                                title: rightdata[i].title,
                                                text: rightdata[i].seo_keywords,
                                                imgsrc: rightdata[i].thumb,
                                                name: rightdata[i].name,
                                                date: rightdata[i].created_at
                                            });

                                        }
                                        else {
                                            // _this.hotlist.push({
                                            //     id: rightdata[i].a_id,
                                            //     title: rightdata[i].title,
                                            //     text: rightdata[i].title,
                                            //     imgsrc: rightdata[i].thumb,
                                            //     name: rightdata[i].name,
                                            //     date: rightdata[i].created_at
                                            // });
                                        }
                                    }

                                    if (_this.hotlist.length == 0) {

                                        _this.addmiddlediv = false
                                    }

                                    break;
                            }
                            break;
                        case 1002:
                            console.log(resdata.msg)
                            break
                    }

                });
            }


        },
        // 热点列表切换
        searchClass(cate_id, cate_name) {

            this.leftcolorCode = cate_id;
            this.hotname = cate_name;
            this.add_no_spot = true
            this.getSpottext(cate_id);
        },
        //精推文章切换
        searchpureClass(cate_id, cate_name) {

            this.rightcolorCode = cate_id;
            this.goodname = cate_name;

            this.getPuretext(cate_id, 0);
        },
        //搜索
        searchText: throttle(function (name) {
            if (name != "") {
                sessionStorage.setItem('SearchTextlist', name)
                this.$router.push("/SearchText")
            }
            else {
                this.showError("error", "请输入查询内容！");
            }
        }, 1000),
        //跳转文章详情
        ToMessageDetails(textid, cate_id) {
            this.$router.push("/MessageDetails")
            sessionStorage.setItem('Details', textid)
            sessionStorage.setItem('Details_cate_id', cate_id)
        },
        //精推热点分类跳转
        ToMessageList(num, listId) {
            sessionStorage.setItem('Detailslist', listId)
            if (num == 1) {
                this.$router.push({
                    path: '/MessageList',
                    // name: 'MessageList',
                    // params: {
                    //     name: this.hotname,
                    //     id: listId
                    // }
                    query: {
                        name: this.hotname,
                        id: listId
                    }
                })


            } else {
                this.$router.push({
                    path: '/MessageList',
                    path: '/MessageList',
                    // name: 'MessageList',
                    // params: {
                    //     name: this.hotname,
                    //     id: listId
                    // }
                    query: {
                        name: this.goodname,
                        id: listId
                    }
                })
            }
        },
        //链接首页
        Topage() {
            this.$router.push("/")
        },
        //消息提示
        showError(type, status) {
            this.$message({
                type: type,
                showClose: true,
                center: true,
                message: status
            });
        },
        // Events listeners
        handleAfterChange(event, slick, currentSlide) {

            let Len = this.leftlist.length + 1
            if (currentSlide == Len) {


            }
        },
    },
    beforeDestroy() {
        document.querySelector('body').removeAttribute('style');
    },
};
</script>
<style lang="scss">
@import '../../assets/css/theme';
@import '../../../node_modules/slick-carousel/slick/slick.css';
// @import '../../../node_modules/slick-carousel/slick/slick-theme.css';

.container {
    max-width: 1200px;
    width: 100%;
    min-width: 1000px;
    height: auto;
    margin: 0 auto;
    padding-top: 15px;
    padding-bottom: 20px;
    //background: #fdfafe;
    .search {
        width: 100%;
        height: 96px;
        float: left;
        //  background: #212121;
        .loge {
            width: 230px;
            height: 78px;
            float: left;
            margin-left: 90px;
            margin-top: 1px;
            .loge-img {
                width: 100%;
                height: 100%;
                cursor: pointer;
            }
        }
        .search-all {
            width: 43%;
            height: 40px;
            float: left;
            margin-top: 24px;
            margin-left: 5%;
            .search-input {
                width: 80%;
                height: 40px;
                float: left;
                margin-right: 4px;
                border: 1px solid #dfc2bf;
                .el-input__inner {
                    width: 100%;
                    height: 40px;
                    border: none;
                }
            }
            .el-input-group__append,
            .el-input-group__prepend {
                background-color: #ffffff;
                color: #909399;
                vertical-align: middle;
                display: table-cell;
                position: relative;
                border: none;

                border-radius: 4px;
                padding: 0 20px;
                width: 1px;
                white-space: nowrap;
            }
            .search-button {
                width: 78px;
                height: 42px;
                background: #558ffb;
                border: none;
                border-left: 1px solid #dfc2bf;
                border-radius: 3px;
                float: left;
                color: #ffffff;
            }
        }

        .search-banner {
            width: 22%;
            height: 76px;
            // background: rgba(147, 147, 147, 1);
            border-radius: 100px;
            float: right;
            margin-top: 10px;
            .loge-img {
                width: 100%;
                height: 100%;
            }
        }
    }
    .middle-net {
        width: 100%;
        min-width: 1;
        background: #ffffff;
        font-size: 15px;
        float: left;
        margin-top: 15px;
        position: relative;
        .middle-list {
            width: 100%;
            height: 100%;
            background: #fbfbfb;
            float: left;
            text-align: center;
            overflow: hidden;
            .middle-link {
                width: 10%;
                height: 33px;
                float: left;
                font-weight: 400;
                letter-spacing: 1px;
                line-height: 33px;
                color: #333333;
            }
            .el-link.el-link--default {
                color: #333333;
            }
            .el-link.el-link--default :hover {
                color: #558ff8;
            }
        }
    }

    .hot-topic {
        width: 100%;
        height: auto;
        background: #ffffff;
        float: left;
        overflow: hidden;

        .move-table {
            width: 1200px;
            height: 135px;
            float: left;
            .nuit-table {
                width: 120px;
                height: 135px;
                padding-left: 12px;
                padding-top: 8px;
                float: left;
                cursor: pointer;
                .img-table {
                    width: 96px;
                    height: 96px;
                    border-radius: 6px 6px 0px 0px;
                    .hot-img {
                        width: 100%;
                        height: 100%;
                        //object-fit: fill;
                        //object-fit: contain;
                        object-fit: cover;
                        //object-fit: none;
                        //object-fit: scale-down;
                    }
                }
                .text-table {
                    width: 96px;
                    height: 35px;
                    background: rgba(251, 251, 251, 1);
                    text-align: left;
                    padding-top: 9px;

                    .table-p:hover {
                        color: #558ffb;
                        text-decoration: underline;
                    }
                }
            }
        }
        .add_nodiv {
            width: 120px;
            height: 120px;
            margin-top: 5px;
            margin-left: 550px;
            cursor: pointer;
            .img-table {
                width: 96px;
                height: 96px;
                border-radius: 0px 0px 0px 0px;
                overflow: hidden;
                .hot-img {
                    width: 100%;
                    height: 100%;
                    //object-fit: fill;
                    //object-fit: contain;
                    object-fit: cover;
                    //object-fit: none;
                    //object-fit: scale-down;
                }
            }
            .text-table {
                width: 96px;
                height: 35px;
                padding-left: 8px;
                padding-top: 5px;
                background: rgba(251, 251, 251, 1);
                text-align: center;
                color: #cac1c1;
                padding-top: 9px;
                table-p :hover {
                    color: #558ffb;
                    text-decoration: underline;
                }
            }
        }

        .close-hot {
            width: 100%;
            height: 40px;
            text-align: center;
            float: left;
            color: #333333;
            .add-hotdiv {
                width: 80px;
                height: 100%;
                margin: auto;
                cursor: pointer;
                padding-top: 8px;
                line-height: 30px;
            }
        }

        .hot-enter {
            opacity: 0;
        }

        .addrotateX {
            transform: rotate(90deg);
            transition: transform 0.5s ease 0s;
        }
        .addrotateX2 {
            transform: rotate(-90deg);
            transition: transform 0.5s ease 0s;
        }

        .add-hidden {
            display: none;
        }

        .hot-enter {
            opacity: 0;
            height: 0;
        }
        .hot-enter-active {
            transition: height 0.6s;
        }
        .hot-leave-to {
            opacity: 0;
            height: 0;
        }
        .hot-leave-active {
            transition: height 0.6s;
        }
    }

    .site-all {
        width: 100%;
        height: 251px;
        margin-top: 20px;

        float: left;
        background: #ffffff;
        .site-map {
            width: 100%;
            height: 33px;
            padding-left: 30px;
            background: rgba(251, 251, 251, 1);
            border: 1px solid rgba(229, 230, 233, 1);
            font-size: 15px;

            float: left;

            position: relative;
            .site-list {
                width: 100%;
                // min-width: 1000px;
                height: 100%;

                float: left;
                text-align: left;
                overflow: hidden;
                .site-link {
                    width: 8%;
                    height: 33px;
                    float: left;
                    font-weight: 400;
                    letter-spacing: 1px;
                    line-height: 28px;
                }
                .addsite {
                    font-size: 20px;
                    .el-link.el-link--default {
                        color: #558ff8;
                        font-weight: 600;
                    }
                    .el-link.el-link--default :hover {
                        color: #ff6f64;
                    }
                }

                .el-link.el-link--default {
                    color: #333333;
                }
                .el-link.el-link--default :hover {
                    color: #558ff8;
                }
            }
        }
        .site-classify {
            width: 100%;
            height: 212px;
            padding-top: 6px;
            background: #ffffff;
            overflow-y: scroll;
            padding-left: 30px;
            .site-top {
                width: 8%;
                height: auto;
                float: left;
                text-align: left;
                .top-list {
                    width: 100%;
                    height: 33px;
                    float: left;
                    overflow: hidden;
                    margin-top: 3px;
                    font-weight: 600;
                }
                .el-link.el-link--default {
                    color: #558ff8;
                    font-weight: 550;
                }
                .el-link.el-link--default :hover {
                    color: #ff6f64;
                }
            }
            .site-detail {
                width: 92%;
                height: auto;
                float: left;
                .classify-table {
                    width: 100%;
                    height: 33px;
                    margin-top: 3px;
                    text-align: left;
                    .every-table {
                        width: 8.83%;
                        height: 33px;
                        float: left;
                        font-weight: 400;
                        letter-spacing: 1px;
                        line-height: 18px;
                        overflow: hidden;
                    }
                    .el-link.el-link--default {
                        color: #333333;
                    }
                    .el-link.el-link--default :hover {
                        color: #558ff8;
                    }
                }
            }
        }
    }
    .new-push {
        width: 100%;
        min-width: 1122px;
        height: 900px;
        // background: #f0faf9;
        margin-top: 20px;
        margin-bottom: 10px;
        float: left;
        .hot-spot {
            width: 35%;
            height: 100%;
            float: left;
            margin-right: 10px;
            background: #ffffff;
            border: 1px solid #f4f4f6;
            overflow: hidden;
            .spot-title {
                width: 100%;
                height: 40px;
                background: #fbfbfb;
                border-bottom: 1px solid #f4f4f6;
                float: left;
                margin-bottom: 10px;
                .spot-table {
                    width: 16.6%;
                    height: 100%;
                    float: left;
                    text-align: center;
                    font-size: 16px;
                    font-weight: 600;
                    line-height: 22px;
                    letter-spacing: 1px;
                    cursor: pointer;
                }
                .linkclass {
                    line-height: 40px;
                }
                .linkclass :hover {
                    color: #ffffff;
                }
            }
            .el-link.el-link--default {
                color: #333333;
                text-align: center;
                font-size: 16px;
                font-weight: 600;
                line-height: 40px;
                letter-spacing: 1px;
            }
            .el-link.el-link--default :hover {
                color: #558ff8;
            }
            .addpadding {
                padding-top: 5px;

                .addbutton {
                    width: 45px;
                    height: 25px;
                    margin: 3px 0 0 0;
                    padding: 0 30px 0px 15px;
                    span {
                        margin: 0px 0 0px -10px;
                    }
                }
            }

            .spot-content {
                width: 100%;
                height: 850px;
                float: left;
                .slick-prevArrow-2 {
                    margin-right: 175px;
                    width: 65px;
                    height: 25px;
                    margin-top: 8px;
                    margin-bottom: 8px;
                    border-radius: 2px;
                    background: #f6f6f6;
                }
                .slick-prevArrow-2:hover {
                    background: #558ff8;
                }
                .spot-hotlist {
                    width: 100%;
                    height: 210px;
                    float: left;
                    padding: 1px 13px 0 12px;
                    text-align: left;

                    cursor: pointer;
                    .hotlist-table {
                        width: 100%;
                        height: 162px;
                        float: left;
                        .hotlist-conimg {
                            width: 100%;
                            height: 100%;
                            float: left;
                            .hotlist-img {
                                width: 100%;
                                height: 100%;
                                // padding-right: 200px;

                                //object-fit: fill;
                                //object-fit: contain;
                                //object-fit: cover;
                                //object-fit: none;
                                //object-fit: scale-down;
                            }
                        }

                        .new-title {
                            width: 100%;
                            margin: 0px 0 0px 0;
                            padding: 0 12px;
                            // padding-bottom: 10px;

                            height: 40px;
                            line-height: 40px;
                            font-size: 16px;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #333333;
                            line-height: 12px;
                            text-shadow: 0px 2px 4px rgba(225, 227, 232, 0.2);
                            float: left;
                            background: #f6f6f6;
                            p {
                                line-height: 40px;
                            }
                        }
                        .new-title :hover {
                            color: #558ffb;
                            text-decoration: underline;
                        }
                        .new-text {
                            width: 100%;
                            height: 28px;
                            font-size: 14px;
                            padding-left: 12px;
                            padding-right: 5%;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #999999;
                            line-height: 22px;
                            text-shadow: 0px 2px 4px rgba(225, 227, 232, 0.2);
                            float: left;
                            overflow: hidden;
                            border-bottom: 1px solid #f6f6f6;
                        }
                    }
                }
            }

            .add_spot_div {
                width: 100%;
                height: 610px;
                float: left;
                padding: 170px 13px 0 12px;
                text-align: left;
                cursor: pointer;
                .hotlist-table {
                    width: 100%;
                    height: 622px;
                    float: left;
                    .hotlist-conimg {
                        width: 150px;
                        height: 150px;
                        margin: 0 auto;

                        .hotlist-img {
                            width: 100%;
                            height: 100%;
                            // padding-right: 200px;

                            //object-fit: fill;
                            //object-fit: contain;
                            //object-fit: cover;
                            //object-fit: none;
                            //object-fit: scale-down;
                        }
                    }

                    .new-title {
                        width: 100%;
                        margin: 10px 0 10px 0;
                        padding-left: 12px;

                        height: 20px;
                        line-height: 20px;
                        font-size: 18px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #cac1c1;
                        line-height: 12px;
                        text-shadow: 0px 2px 4px rgba(225, 227, 232, 0.2);
                        text-align: center;
                        float: left;
                        p {
                            line-height: 20px;
                        }
                    }

                    .new-text {
                        width: 100%;
                        height: 22px;
                        font-size: 14px;
                        padding-left: 12px;
                        padding-right: 5%;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #333333;
                        line-height: 22px;
                        text-shadow: 0px 2px 4px rgba(225, 227, 232, 0.2);
                        float: left;
                        overflow: hidden;
                    }
                }
            }
        }
        .pure-push {
            width: 64.1%;
            height: 100%;
            float: left;
            background: #ffffff;
            border: 1px solid #f4f4f6;
            .pure-title {
                width: 100%;
                height: 40px;
                background: #fbfbfb;
                border-bottom: 1px solid #f4f4f6;
                overflow: hidden;
                padding-left: 5px;
                float: left;
                .pure-icon {
                    height: 25px;
                    width: 25px;
                    margin-top: 2px;
                    float: left;
                    color: #333333;
                    line-height: 36px;
                    font-size: 18px;
                    cursor: pointer;
                }
                .pure-middletitle {
                    width: 610px;
                    height: 40px;
                    //border-bottom: 1px solid #f4f4f6;
                    overflow: hidden;
                    margin-left: 5px;
                    float: left;
                    position: relative;
                    #addmove {
                        position: absolute;
                        top: 0px;
                        left: 0px;
                    }
                    .pure-content {
                        width: 2000px;
                        height: 100%;
                        overflow: hidden;
                        position: absolute;
                        left: 0px;
                        float: left;

                        .pure-table {
                            width: 2.75%;
                            height: 97%;
                            float: left;
                            text-align: center;
                            font-size: 16px;
                            font-weight: 600;
                            line-height: 22px;
                            letter-spacing: 1px;

                            cursor: pointer;
                            .linkclass {
                                line-height: 40px;
                            }
                            .linkclass :hover {
                                color: #ffffff;
                            }
                        }
                        .el-link.el-link--default {
                            color: #333333;
                            text-align: center;
                            font-size: 16px;
                            font-weight: 600;
                            line-height: 40px;
                            letter-spacing: 1px;
                        }
                        .el-link.el-link--default :hover {
                            color: #558ff8;
                        }
                    }
                }
                .addpadding {
                    margin-top: 5px;
                    width: 57px;
                    height: 25px;
                    float: left;
                    .addbutton {
                        width: 45px;
                        height: 25px;
                        margin: 3px 0 0 0;
                        padding: 0 30px 0px 15px;
                        span {
                            margin: 0px 0 0px -10px;
                        }
                    }
                }
            }
            .pure-list {
                width: 100%;
                height: 100%;
                padding-top: 2px;
                overflow: hidden;
                position: relative;

                .slick-prevArrow {
                    margin-right: 345px;
                    width: 65px;
                    height: 25px;
                    margin-top: 8px;
                    margin-bottom: 8px;
                    border-radius: 2px;
                    background: #f6f6f6;
                }
                .slick-prevArrow:hover {
                    background: #558ff8;
                }
                .pure-hotlist {
                    width: 100%;
                    height: 140px;
                    float: left;
                    padding: 9px 10px 8px 10px;
                    border-bottom: 1px solid #f6f6f6;
                    cursor: pointer;
                    .purelist-table {
                        width: 24.3%;
                        height: 122px;
                        border-radius: 5px;
                        float: left;
                        .purelist-img {
                            width: 100%;
                            height: 100%;
                        }
                    }
                    .purelist-details {
                        width: 72.3%;
                        height: 121px;
                        padding: 0px 12px 0px 10px;
                        float: left;
                        margin-left: 10px;
                        text-align: left;
                        .purelist-title {
                            width: 100%;
                            height: 40px;
                            font-size: 18px;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #333333;
                            line-height: 20px;
                            float: left;
                            text-align: left;
                        }
                        .purelist-title :hover {
                            color: #558ffb;
                            text-decoration: underline;
                        }
                        .purelist-text {
                            width: 100%;
                            height: 40px;
                            font-size: 14px;
                            color: #999999;
                            float: left;
                            text-align: left;
                            overflow: hidden;
                        }
                        .purelist-name {
                            width: 100%;
                            height: 20px;
                            float: left;
                            color: #999999;
                            text-align: left;
                            margin-top: 27px;
                        }
                    }
                }
            }

            .add_pure-list {
                width: 100%;
                height: 620px;
                overflow: hidden;
                .pure-hotlist {
                    width: 100%;
                    height: 139px;
                    float: left;
                    padding: 170px 0px 0px 11px;
                    cursor: pointer;
                    .purelist-table {
                        width: 150px;
                        height: 150px;
                        margin: 0 auto;

                        .purelist-img {
                            width: 100%;
                            height: 100%;
                        }
                    }
                    .purelist-details {
                        width: 72.3%;
                        height: 121px;
                        padding: 9px 12px 17px 10px;
                        float: left;
                        margin-left: 10px;
                        text-align: center;
                        .purelist-title {
                            width: 100%;
                            height: 40px;
                            font-size: 18px;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #cac1c1;
                            line-height: 40px;
                            padding-left: 210px;
                            float: left;
                            text-align: center;
                        }

                        .purelist-text {
                            width: 100%;
                            height: 40px;
                            font-size: 14px;
                            color: #999999;
                            float: left;
                            text-align: left;
                            overflow: hidden;
                        }
                        .purelist-name {
                            width: 100%;
                            height: 20px;
                            float: left;
                            color: #999999;
                            text-align: left;
                            margin-top: 10px;
                        }
                    }
                }
            }
        }
    }
}

.add_color {
    color: #558ff8;
    font-size: 20px;
    border-bottom: 1px solid #558ff8;
}

.textOut {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.addhiden {
    display: none;
}
</style>
